import React from 'react';
import './index.scss';

import { Menu, Icon, Switch } from 'antd';

const { SubMenu } = Menu;

import {
    AppstoreOutlined,
    CreditCardOutlined
} from '@ant-design/icons';

import { withRouter } from 'react-router-dom';

class SideMenu extends React.Component {

    state = {
        mode: 'inline',
        theme: 'light',
    };

    rendMenTree(arr) {
        return arr.map((tree) => {
            if (tree['children'] && tree['children'].length > 0) {
                return <SubMenu title={<><AppstoreOutlined />{tree.name}</>}>
                    {this.rendMenTree(tree.children)}
                </SubMenu>
            } else {
                return <Menu.Item onClick={() => this.props.leafNodeClick(tree)}> <CreditCardOutlined /> {tree.name}</Menu.Item>
            }

        })
    }

    render() {
        return <div className="h-side-menu" >
            <Menu
                style={{ width: 220 }}
                mode={this.state.mode}
                theme={this.state.theme}
            >
                {
                    this.rendMenTree(this.props.menuTree)
                }
            </Menu>
        </div >
    }
}

export default SideMenu;